<template>
  <div class="ping-child">
    <!-- 展示在首条评论下面,而不是旁边 -->
     <img class="ping-img" :src="(props?.info?.userId?.imgsrc)" alt="">
     <div class="ping-info">
       <span>{{props.info.userId.uname}}</span>
       <span>{{props.info.time}}</span>
       <span>{{props.info.content}}</span>
     </div>
  </div>
</template>

<script setup >
import { ref, reactive} from 'vue'
const props=defineProps(['info'])
console.log(props.info.userId.imgsrc);

</script>
<style  scoped>
.ping-child{
  display: flex;
  margin: 10px 0;
}
.ping-img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}
.ping-info{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 50px;
}

</style>